import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'

// 1. 导入模板
import { styleModule } from 'snabbdom/build/package/modules/style'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'

// 2. 注册模板
const patch = init([
  styleModule,
  eventListenersModule
])

// 3. 使用 h() 函数的第二个参数传入模块中使用的数据(对象)
let vnode = h('div', [
  h('h1', { style: { backgroundColor: 'yellow' } }, 'Hello Roch'),
  h('p', { on: { click: eventHandler } }, 'Hello P'),
])


function eventHandler () {
  alert(' click the eventHander\'s button')
}

let app = document.querySelector('#app')
patch(app, vnode)